<%@ page contentType="text/html; charset=utf-8" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" 
%><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" 
%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>fileupload.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	body {
		font-size: 12px;
		font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	}
	
	[css-tag=button] {
		width: 19px !important;
		height: 20px !important;
	}
	
	[css-tag=span-file] {
		line-height: 25px;;
		display: block;
	}
	
</style>
<script src="${pageContext.request.contextPath}/js/jquery/jquery-1.11.0.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="${pageContext.request.contextPath}/js/jquery/ui/css/redmond/jquery-ui-1.10.4.custom.css" />
<script src="${pageContext.request.contextPath}/js/jquery/ui/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery/file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery/file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery/file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
<c:set value="${pageContext.request.contextPath}/app/sample.uploadfile/message" var="messageUploadUrl"/>
<c:set value="${pageContext.request.contextPath}/app/sample.uploadfile/file" var="fileUploadUrl"/>
<script type="text/javascript">
$(function() {
	init();
});

function init() {
	$("input:button").button();
	
	$("#upload").fileupload({
		// File API를 지원하는 IE10+, Chrome 등 지원  
		add: function(e, data) {
			var isOK = true;
			
			if (data.files.length > 0) {
				var size = data.files[0].size;
				isOK = (!size || size <= 5000000);
			}
			
			if (isOK) { 
				data.submit(); 
			} else {
				alert("파일크기가 초과되었습니다.");
			}
		},
		// IE9 에서 json 형식을 처리하지 못하여 text 로 처리함, 관련 컨트롤러도 수정 
  		dataType: "text",
        done: function (e, data) {
        	alert("done");
        	
        	var jsonData = $.parseJSON(data.result);
				
	        $.each(jsonData, function (index, file) {
// 		    	$("body").data("filelist").push(file);
// 		        $("#filename").append(formatFileDisplay(file));
// 		        $("#attach").empty().append("Add another file");
				var $elem = $(getFileHtml(file));
				$elem.data("file", file);
				$("#filename").append($elem);
	        });        	
        },
        fail: function(e, data) {
        	if (data.jqXHR.responseJSON) {
        	    alert(data.jqXHR.responseJSON.message);	
        	} else {
        	    alert("처리 중 오류가 발생하였습니다.");
        	}
        }
    });
    
	$("#attach").click(function () {
	    $("#upload").trigger("click");
	});
}

function getFileHtml(file) {
	var html = "<span class='ui-widget' css-tag='span-file' data-tag='file'>{file}&nbsp;({size}K)&nbsp;"
		+ "<button class='ui-button ui-widget ui-state-default ui-corner-all' css-tag='button'><span class='ui-icon ui-icon-closethick'/></button>"
		+ "</span>";
		
	html = html.replace("{file}", file.name).replace("{size}", (file.size / 1000).toFixed(2));
	return html;
}

function formatFileDisplay(file) {
	var size = "<span style='font-style:italic'>" + (file.size / 1000).toFixed(2) + "K</span>";
	return file.name + " (" + size + ")<br/>";
}

function getFilelist() {
	var files = $("body").data("filelist");
	var filenames = "";
	
	for (var i = 0; i < files.length; i < i++) {
		var suffix = (i == files.length - 1) ? "" : ",";
		filenames += files[i].name + suffix;
	}
	
	return filenames;
}
</script>
</head>
<body>
	<div>
		<%-- <a href="#" id="attach">파일선택</a><input id="upload" type="file" name="file" data-url="${fileUploadUrl}" multiple style="opacity: 0; filter:alpha(opacity: 0);"> --%>
		<a href="#" id="attach">파일선택</a><input id="upload" type="file" name="file" data-url="${fileUploadUrl}" multiple style="opacity: 0; filter:alpha(opacity: 0);"><br/>
		<span id="filename">
			<span class="ui-widget" css-tag="span-file" data-tag="file">파일명1.txt&nbsp;<button class="ui-button ui-widget ui-state-default ui-corner-all" css-tag="button"><span class="ui-icon ui-icon-closethick"/></button></span>
			<span class="ui-widget" css-tag="span-file" data-tag="file">파일명2.txt&nbsp;<button class="ui-button ui-widget ui-state-default ui-corner-all" css-tag="button"><span class="ui-icon ui-icon-closethick"/></button></span>
		</span>
	</div>
</body>
</html>